<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ title }}</title>
    <link rel="stylesheet" href="https://flavorsomerecipes.com{{ url_for('static', filename='header.css') }}">
    <link rel="stylesheet" href="https://flavorsomerecipes.com{{ url_for('static', filename='list.css') }}">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="shortcut icon" href="{{ url_for('static', filename='favorites.icon') }}" type="image/x-icon">
    <script>
        var _hmt = _hmt || [];
        (function() {
            var hm = document.createElement("script");
            hm.src = "https://hm.baidu.com/hm.js?38fcc093c940c38c72f6ed7e10f47097";
            var s = document.getElementsByTagName("script")[0]; 
            s.parentNode.insertBefore(hm, s);
        })();
    </script>
    <script>
      document.addEventListener("DOMContentLoaded", function() {
        var lazyImages = document.querySelectorAll(".lazy");
        function lazyLoad() {
          for (var i = 0; i < lazyImages.length; i++) {
            if (lazyImages[i].getBoundingClientRect().top <= window.innerHeight && lazyImages[i].getBoundingClientRect().bottom >= 0 && getComputedStyle(lazyImages[i]).display !== "none") {
              lazyImages[i].src = lazyImages[i].dataset.src;
              lazyImages[i].classList.remove("lazy");
            }
          }
        }
        lazyLoad();
        window.addEventListener("scroll", lazyLoad);
        window.addEventListener("resize", lazyLoad);
      });
    </script>
</head>
<body>
    {% include 'header.html' %}
    <main>
        <section class="recipe-list">
            <h2>{{ cate_title }}</h2>
            <div class="recipes-grid">
                {% for name,num in detail %}
                <div class="recipe-card">
                    <h4><a href="https://flavorsomerecipes.com/recipe/{{ num[0] }}">
                    <img class="lazy" data-src="https://flavorsomerecipes.com/static/{{ num[1] }}/{{ num[1] }}.jpg" alt="{{ name }}"><br>{{ name }}</a></h4>
                    <p>{{ num[2] }}</p>
                </div>
                {% endfor %}
                <!-- Additional recipe cards should follow this pattern -->
            </div>
        </section>
    </main>
    {% include 'footer.html' %}
    <script src="/static/recipes.js"></script>
</body>
</html>
